<template>
  <section class="PersonBasic">
    <quick-panel title="基本信息">
      <quick-action-bar slot="subtitle">
        <quick-icon-button
          icon="icon-lound-speaker"
          tooltip="日报"
          @click="getInfo"
        />
      </quick-action-bar>
      <div class="basicSection">
        <h1>
          <span> admin </span>
          <gender-icon :value="+gender" />
        </h1>
        <p>
          <quick-tag-plain
            label="年龄"
            :value="age"
            type="q-tag-value-bg-blue"
          />
          <quick-tag-plain label="电话" :value="telephone" type="green-4" />
        </p>
      </div>
    </quick-panel>
  </section>
</template>

<script>
import GenderIcon from "@/views/Common/GenderIcon";
export default {
  components: { GenderIcon },
  data() {
    return {
      gender: 0,
      age: "20",
      telephone: "1388999",
    };
  },
  methods: {
    getInfo() {},
  },
};
</script>

<style lang="scss" scoped>
.PersonBasic {
  height: 100%;
  .basicSection {
    h1 {
      font-size: 2.2rem;
      font-weight: bold;
      line-height: 2.5;
      display: flex;
    }
  }
}
</style>